<template>
    <base-modal
        title="接待餐费用"
        cancelText="关闭"
        okText="提交"
        :width="900"
        v-on="$listeners"
        @ok="handleOk"
        :confirmLoading="loading.isSaving"
    >
        <a-spin :spinning="loading.isSaving">
            <a-form-model
                ref="ruleForm"
                :model="formInfo"
                :rules="rules"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            >
                <a-row :gutter="24">
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="接待餐费用" prop="mealMoney">
                            <BaseInputNumber placeholder="请输入" v-model.trim="formInfo.mealMoney" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <a-form-model-item label="附件" prop="fileInfoVOS">
                            <l-table count="5" businessCode="OF05" :uploadArrys.sync="formInfo.fileInfoVOS"></l-table>
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <div class="file_prompt ml20">
                            上传接待餐采购清单及小票，支持格式：.rar .zip .doc .docx .pdf .jpg...
                        </div>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <a-divider type="horizontal"></a-divider>
                        <title-name title="接待餐申请信息"></title-name>
                    </a-col>

                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="单位">
                            <BaseInput disabled v-model.trim="formInfo.orgIdStr" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="预约部门">
                            <BaseInput disabled v-model.trim="formInfo.makeDeptName" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="用餐时间">
                            <BaseInput disabled :value="formInfo.mealsDateStart + '-' + formInfo.mealsDateStart" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="用餐时段">
                            <BaseInput disabled v-model.trim="formInfo.mealsTimeStr" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="用餐地点">
                            <BaseInput disabled v-model.trim="formInfo.address" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="用餐人数">
                            <BaseInput disabled v-model.trim="formInfo.mealsNum" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-form-model-item label="接待级别">
                            <BaseInput disabled v-model.trim="formInfo.receptionLevelStr" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-spin>
    </base-modal>
</template>

<script>
import { getCasualMealsApply, addCasualMealsApplyParameter } from '@/api/office/canteen' // api
import BaseModal from '@/components/BaseModal'
export default {
    components: {
        BaseModal,
    },
    props: {
        initData: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            loading: {
                isSaving: false,
            },
            formInfo: {
                name: '',
                enabled: 1,
            },
            rules: {
                mealMoney: [{ required: true, message: '请输入用餐费用', trigger: 'change' }],
                fileInfoVOS: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }],
            },
        }
    },
    created() {
        this.getDetail()
    },
    watch: {
        // 监听附件实现附件校验
        'formInfo.fileInfoVOS'() {
            this.$nextTick(() => {

                this.$refs.ruleForm?.validateField('fileInfoVOS')
            })
        },
    },
    methods: {
        validateForm() {
            let flag = false
            this.$refs.ruleForm.validate((valid) => {
                flag = valid
              if(!valid) {
                this.$message.warning("请填写完所有必填项信息")
              }
            })
            return flag
        },
        getDetail() {
            const { id } = this.initData
            if (!id) return
            this.loading.isSaving = true
            getCasualMealsApply(id).then((res) => {
                this.loading.isSaving = false
                this.formInfo = {
                    ...this.formInfo,
                    ...res.data,
                }
            })
        },
        async handleOk() {
            if (!this.validateForm()) return
            if (this.loading.isSaving) return
            this.loading.isSaving = true
            const { id, mealMoney, fileInfoVOS } = this.formInfo
            const params = {
                canteenId: id,
                mealMoney,
                fileInfoVOS,
            }
            this.$confirm({
                title: '温馨提示',
                content: '请确定是否要提交？',
                onOk: () => {
                    return addCasualMealsApplyParameter(params).then(() => {
                        this.loading.isSaving = false
                        this.$message.success('成功')
                        this.$emit('confirm')
                    })
                },
                onCancel:()=>{ this.loading.isSaving = false}
            })
        },
    },
}
</script>

<style lang="less" scoped>
form .ant-mentions,
form textarea.ant-input {
    height: auto !important;
    width: 100%;
}
</style>
